export default {
    setup() {
        const visible = Vue.ref(false);
        const confirmBtnText = Vue.ref("确定");
        const cancelBtnText = Vue.ref("取消");
        const _widthInParent = Vue.ref(40);
        const _heightInParent = Vue.ref(30);
        const widthInParent = Vue.computed({
            get() {
                return _widthInParent.value + "%";
            },
            set(value) {
                _widthInParent.value = value;
            },
        })
        const heightInParent = Vue.computed({
            get() {
                return _heightInParent.value + "%";
            },
            set(value) {
                _heightInParent.value = value;
            },
        })
        // for (const e in this.emits) {
        //     ctx.emit(e);
        // }
        function confirm() {
            hide();
            for (let f of onConfirmList.value) {
                f();
            }
            onConfirmList.value = [() => {
            }];
        }

        // 取消
        function cancel() {
            hide();
            for (let f of onCancelList.value) {
                f();
            }
            onCancelList.value = [() => {
            }];
        }

        function hide() {
            // console.log("hide in popup");
            visible.value = false;
        }

        function show() {
            document.activeElement.blur();
            visible.value = true;
            // console.log(visible.value);
        }

        const onConfirmList = Vue.ref([() => {
        }]);

        const onCancelList = Vue.ref([() => {
        }]);

        const onConfirm = Vue.computed({
            set(f) {
                onConfirmList.value.push(f);
            }
        });
        const onCancel = Vue.computed({
            set(f) {
                onCancelList.value.push(f);
            }
        });

        function onKeyUp(e) {
            // console.log(e);
            // console.log(e.key);
            if (e && visible.value) {//Esc按键
                if (e.key === 'Escape') {
                    // console.log(visible.value);
                    cancel();
                }
            }
        }

        document.addEventListener('keyup', onKeyUp);

        const wrapperStyle = Vue.ref({});
        const wrapperBackgroundStyle = Vue.ref({});

        return {
            visible, show, onConfirm, onCancel,
            confirm, cancel, confirmBtnText, cancelBtnText,
            widthInParent, heightInParent, wrapperBackgroundStyle,
            wrapperStyle, hide
        };
    },

    template: `  
<div>
      <div class="confirm" v-show="visible" style="
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 1300;
        background: rgba(0, 0, 0, 0.6);
        " :style="wrapperBackgroundStyle"
        >
        <div class="confirm-wrapper" style="
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1301;
            background-color: rgb(240, 243, 253);
            border:2px solid #a1a1a1;
            text-align: center;
            border-radius:25px;
            -moz-border-radius:25px;
    " :style="[{width: widthInParent,
            height: heightInParent,}, wrapperStyle]">
          <slot></slot>
          <div class="my-font" style="
                position: absolute;
                bottom: 20px;
                left: 20%;
                font-size: 24px;
                cursor: pointer;
                background-color: #C7E4FBC2;
                border: none;
                outline: none;
                border-radius: 10px;
                padding-left: 15px;
                padding-right: 15px;" @click.stop="confirm">
                {{ confirmBtnText }}
            </div>
            <div class="my-font" style="
                position: absolute;
                bottom: 20px;
                right: 20%;
                font-size: 24px;
                cursor: pointer;
                background-color: #C7E4FBC2;
                border: none;
                outline: none;
                border-radius: 10px;
                padding-left: 15px;
                padding-right: 15px;" @click.stop="cancel">
                {{ cancelBtnText }}
            </div>
        </div>
      </div>
</div>`
}